<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <!-- <main id="main">
        <h1>My Blogs</h1>
        <article>
          <h2>My first blog post</h2>
          <p class="text">This is the content of my post</p>
        </article>
      </main> -->
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script>
      const paragraph = React.createElement(
        "p",
        { className: "text" },
        "This is the content of my post"
      );
      const articleHeader = React.createElement(
        "h2",
        null,
        "my first blog post"
      );
      const article = React.createElement(
        "article",
        null,
        articleHeader,
        paragraph
      );
      const mainHeader = React.createElement("h1", null, "My Blog");
      const main = React.createElement(
        "main",
        { id: "main" },
        mainHeader,
        article
      );
      ReactDOM.render(main, document.getElementById("root"));
    </script>
  </body>
</html>
